<template>
  <div class="pic-container">
    <el-row>
      <!-- 首页底部图片展示区 start -->
      <div
        class="pic-item"
        v-for="(item, index) in imgList"
        :key="item.id"
        :style="{ 'background-image': 'url(' + item.src + ')' }"
        @click="toBack()"
      >
        <span class="pic-title">{{ item.title }}</span>
        <span :class="imgClass[index]">{{ item.content }}</span>
      </div>
      <!-- 首页底部图片展示区 end -->
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgList: [
        {
          id: 0,
          title: '无需押金',
          content: '支付方式安全',
          src: require('../assets/pic/pay.jpg')
        },
        {
          id: 1,
          title: '安全好用',
          content: '使用感一级棒',
          src: require('../assets/pic/use.jpg')
        },
        {
          id: 2,
          title: '方便出行',
          content: '上班下班不堵车',
          src: require('../assets/pic/work.jpg')
        },
        {
          id: 4,
          title: '倡导文明安全',
          content: '安全文明用车，让生活更美好',
          src: require('../assets/pic/live.jpg')
        }
      ],
      imgClass: [
        'pic-content one',
        'pic-content two',
        'pic-content three',
        'pic-content four'
      ]
    }
  },
  methods: {
    // 跳转至租车菜单
    toBack() {
      this.$router.push({
        name: 'goods'
      })
    }
  }
}
</script>

<style lang="less" scoped>
// 图片展示区演示
.el-row {
  display: flex;
  height: 366px;
  overflow: hidden;
}
.pic-title {
  position: relative;
  top: 39px;
  left: 3px;
  font-size: 22px;
  color: #fff;
}
.pic-content {
  position: relative;
  top: 81px;
  color: #fff;
}
.one {
  margin-left: -84px;
}
.two {
  margin-left: -84px;
}
.three {
  margin-left: -84px;
}
.four {
  margin-left: -126px;
}
img {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
// 图片遮罩层
.pic-item::after {
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  position: absolute;
  background: rgba(0, 0, 0, 0.335);
  content: '';
}

.pic-item {
  position: relative;
  width: 25%;
  cursor: pointer;
  background-size: cover;
  transition: all 2.5s;
}
.pic-item:hover {
  background-size: 120%;
  transition: all 2s linear;
}
.pic-item:hover::after {
  background: rgba(0, 0, 0, 0);
}
</style>